<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Wechat H5 Boilerplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- Add your keywords and description here for SEO. -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

    <!-- Uncomment this if you need apple touch icon. -->
    <!--
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    -->

    <!-- Don't delete this. It's needed for development workflow. -->
    <!-- inject:css -->
    <!-- endinject -->
</head>

<body>
<div class="loading-overlay">
    <img src="images/loading.svg">
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-1">
            <div class="item-image animated" data-ani-name="slideInLeft" data-ani-duration="1s" data-ani-delay="0s"></div>
            <p class="item-text animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
        </div>
        <div class="swiper-slide slide-2">
            <div class="item-image animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s"></div>
            <p class="item-text animated" data-ani-name="bounceInUp" data-ani-duration="1s" data-ani-delay="0.3s">I'm a frontend developer!</p>
        </div>
        <div class="swiper-slide slide-3">
            <div class="item-image animated" data-ani-name="flipInX" data-ani-duration="1s" data-ani-delay="0s"></div>
            <p class="item-text animated" data-ani-name="flipInY" data-ani-duration="1s" data-ani-delay="0.3s">I'm a javascript newbie!</p>
        </div>
    </div>
</div>

<button class="up-arrow">
    <i class="icon-angle-double-up"></i>
</button>

<button class="btn-music">
    <i class="icon-note"></i>
</button>

<audio loop>
    <source src="audios/background.mp3" type="audio/mpeg">
</audio>

<!-- Don't delete this. It's needed for development workflow. -->
<!-- inject:js -->
<!-- endinject -->

</body>

</html>
